<template>
    <div class="comment-reply">
      <!-- 导航栏 -->
      <van-nav-bar :title="`${comment.reply_count}条回复`">
        <van-icon
          slot="left"
          name="cross"
          @click="$emit('click-close')"
        />
      </van-nav-bar>
      <!-- /导航栏 -->

      <!-- 当前评论项 -->
      <CommentItem :comment="comment" :is-reply-show="false"></CommentItem>
      <!-- /当前评论项 -->

      <van-cell title="所有回复" />

      <!-- 评论的回复列表 -->
      <ArticleComment :article-id="comment.com_id" :list="replyList" :type="'c'"></ArticleComment>

      <!-- /评论的回复列表 -->

      <!-- 底部 -->
      <div class="reply-bottom">
        <van-button class="bottom-button" @click="isReplyPostShow = true" round type="info" size="small">回复评论</van-button>
      </div>
      <!-- /底部 -->
      <van-popup v-model="isReplyPostShow" position="bottom"  >
        <CommentPost :target-id="comment.com_id" @post-success="onPostSuccess"></CommentPost>
      </van-popup>
    </div>
  </template>

<script>
import CommentPost from './comment-post.vue'
import CommentItem from './comment-item.vue'
import ArticleComment from './article-comment.vue'
export default {
  name: 'CommentReply',
  components: {
    CommentItem,
    ArticleComment,
    CommentPost
  },
  props: {
    comment: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      replyList: [],
      isReplyPostShow: false
    }
  },
  computed: {},
  watch: {},
  created () {},
  mounted () {},
  methods: {
    onPostSuccess (data) {
      // 更新回复的数量
      this.comment.reply_count++

      // 关闭弹层
      this.isReplyPostShow = false

      // 将最新回复的内容展示到列表的顶部
      this.replyList.unshift(data.new_obj)
    }
  }
}
</script>

  <style scoped>
.comment-reply{

  .reply-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 88px;
    border-top: 1px solid #d8d8d8;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    .bottom-button{
        width: 60%;
    }

  }

}

</style>
